<% content_for(:title, "Components: Theme") %>

<% toolbar(:primary) do %>
  <%= color_field_tag :theme, "", class: "color-swatch", title: "Secondary", data: { controller: "theme tooltip", action: "input->theme#update", theme_variable_value: "secondary", bs_placement: "bottom" } %>
  <%= color_field_tag :theme, "", class: "color-swatch", title: "Primary", data: { controller: "theme tooltip", action: "input->theme#update", theme_variable_value: "primary", bs_placement: "bottom" } %>
<% end %>

<%= render layout: "layout", locals: { wrapper: false } do %>
  <div class="grid grid-cols-lg-2">
    <div class="grid">
      <%= render "typography" %>
      <%= render "buttons" %>
      <%= render "badges" %>
      <%= render "backgrounds" %>
      <%= render "accordion" %>
    </div>

    <div class="grid">
      <%= render "fields" %>
      <%= render "alerts" %>
      <%= render "table" %>
      <%= render "modal" %>
    </div>
  </div>
<% end %>
